<!--
 * @Author: your name
 * @Date: 2021-08-06 15:15:05
 * @LastEditTime: 2021-08-06 16:49:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuestudy\vue\19-插槽\具名插槽.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="../15-组件/css/common.css" />
</head>
<style>
    [v-cloak] {
        display: none;
    }
</style>

<body>
    <div id="app" v-cloak>
        <!-- 用axios去请求一个数据 -->
        <div v-for="item in grades"></div>
    </div>
    <script>
        // 混入
        // 局部混入:在vue实例对象中定义属性 mixins:[{}]没有意义局部混入
        // 全局混入：除了el其余都可以写
        Vue.mixin({
            // 混入数据
            data() { // 一般只用到data对象的混入
                return {
                    
                }
            },
            // 混入方法
            methods: {
                
            },
            // 全局混入后可以通过this.调用
        })
        Vue.component("mylayout", {
            props: ["stus", "title"],
            template: ``,
            methods: {
                del(i) {
                    this.$emit("delclick", i)
                }
            },
        });
        new Vue({
            el: "#app",
            // 局部混入没有意义
            mixins:[],
            data() {
                return {
                    grades: []
                }
            },
            created() {
                axios.get("").then(function (res) {
                    console.log(res)
                })
            },
        });
    </script>
</body>

</html>